import { View, Text, } from '@tarojs/components';
import React, { Component } from 'react'
import { Field, DatetimePicker, Popup } from '@antmjs/vantui'
import classNames from 'classnames'
import './index.scss'
import PropTypes from 'prop-types';


// PdsField 需要的参数
interface PdsFormTimePickerComponentProps extends BaseComponentProps {
    name?: string, // 名称
    disabled?: boolean,//是否可以弹框
    placeholder?: string, // 
    onChange?: Function, // 接受一个函数类型的 onSubmit 属性
    selectTimeData?: number//选中的
    minDate?: number//
    maxDate?: number//
}

class PdsFormTimePicker extends Component<PdsFormTimePickerComponentProps, any> {

    static defaultProps = {
        name: "",
        placeholder: '请选择',
        selectTimeData: Date.now,
        disabled: false,
        onChange: () => {
        }
    }

    constructor(props) {
        super(props);
        this.state = { value: '', showPopUP: false }
    }

    handleClickInput = () => {
        const { disabled } = this.props
        if (!disabled) {
            this.setState({ showPopUP: true })
        }
    }

    onCancel = () => {
        this.setState({ showPopUP: false })
    }

    onConfirm = (event) => {
        const { value, index } = event.detail
        const { onChange } = this.props
        console.log(value, index)
        this.setState({ value: value, showPopUP: false })
        if (onChange) {
            onChange(value)
        }
    }

    formatter = (type, value) => {
        if (type === 'year') {
            return `${value}年`
        }
        if (type === 'month') {
            return `${value}月`
        }
        if (type === 'day') {
            return `${value}日`
        }
        return value
    }

    render() {
        const { value, showPopUP } = this.state
        const { name, placeholder, className, selectTimeData, minDate, maxDate } = this.props
        console.log(selectTimeData)

        return (
            <View className={classNames(className, 'pds-from-time-picker')}>
                <Text>{name}</Text>
                {/* 使用这控件有点小问题 */}
                <Field
                    disabled
                    value={value}
                    placeholder={placeholder}
                    border={false}
                    isLink
                    arrowDirection='down'
                    onClickInput={this.handleClickInput.bind(this)}
                />
                {/* <Cell title="圆角弹窗" isLink arrowDirection="down" url={this.handleClickInput.bind(this)} /> */}
                <Popup show={showPopUP} position='bottom' onClose={this.onCancel.bind(this)}>
                    <DatetimePicker
                        type="date"
                        value={selectTimeData}
                        minDate={minDate}
                        maxDate={maxDate}
                        formatter={this.formatter}
                        onCancel={this.onCancel.bind(this)} onConfirm={this.onConfirm.bind(this)}
                    />
                </Popup>

            </View>
        );
    }
}

export default PdsFormTimePicker;


